import React,{useState} from "react";
import { Button, Modal,Form,Input, message,Select,InputNumber} from "antd";

const FormItem = Form.Item;

const { TextArea } = Input;
const { Option } = Select;

const updateChannel = (props) =>{
    const {
        onSubmit:handleUpdate,
        onCanel:handleUpdateModalVisibel,
        updateModalVisible
    }=props;


    
    const apis=props.apis;

    const [fromVals,setFormVals]=useState({
        channelName:props.values.channelName,
        channelNum:props.values.channelNum,
        balance:props.values.balance,
        apiId:props.values.apiId,
        discount:props.values.discount,
        status:props.values.status,
        id:props.values.id,
        apiConfig:JSON.parse(props.values.apiInfo),
    
    })

    const formLayout = {
        labelCol: {
            span: 7
        },
        wrapperCol: {
            span: 13
        }
    }

    const [form] = Form.useForm();
    var apiInfo=[];
    try{
        apis?.map((item)=>{
        if(item.id==props.values.apiId){
            apiInfo=JSON.parse(item.apiInfo);
        }
    })
    }catch{

    }
    const [fields, setFields] = useState(apiInfo)

    const selectOnChange=(value)=>{

        apis?.map((item)=>{
            if(item.id==value){
                setFields(JSON.parse(item.apiInfo))
            }
        })
}

    const handleSubmit = async ()=>{
        try{
            var fieldVlas = await form.validateFields();
            fieldVlas.apiInfo=JSON.stringify(fieldVlas.apiInfo)
            setFormVals({ ...fromVals, ...fieldVlas });
            handleUpdate({...fromVals,...fieldVlas})
        }catch(error){
            message.error("配置失败");
        }
    }


    return (
        <Modal
          title="配置api模板"
          width={740}
          destroyOnClose
          visible={updateModalVisible}
          footer={[
            <Button key="cancel" onClick={()=>{
                handleUpdateModalVisibel(false)
            }}>取消</Button>,
            <Button key="submit" type="primary" onClick={()=>{
                handleSubmit();
            }}>提交</Button>
        ]}
          onCancel={()=>{
              handleUpdateModalVisibel(false)
          }}
        >
          <Form
              {...formLayout}
              initialValues={
                  {
                    status:fromVals.status,
                    channelName:fromVals.channelName,
                    apiId:fromVals.apiId,
                    balance:fromVals.balance,
                    channelNum:fromVals.channelNum,
                    discount:fromVals.discount,
                    apiInfo:fromVals.apiConfig,
                  }
              }
              form={form}
            >
                <FormItem
                  label="渠道名称"
                  name="channelName"
                  rules={[{
                      required:true,
                      message:'渠道名称是必须项'
                  }]}
                >
                    <Input placeholder="请输入渠道名称"></Input>
                </FormItem>
                <FormItem
                  label="渠道编号"
                  name="channelNum"
                  rules={[{
                      required:true,
                      message:'渠道编号是必须项'
                  }]}
                >
                    <Input placeholder="请输入渠道编号"></Input>
                </FormItem>

                <FormItem
                  label="渠道折扣"
                  name="discount"
                  rules={[{
                      required:true,
                      message:'渠道折扣是必须项'
                  }]}
                >
                    <InputNumber placeholder="请输入渠道折扣" style={{ width: '100%' }}></InputNumber>
                </FormItem>

                <FormItem
                  label="渠道余额"
                  name="balance"
                  rules={[{
                      required:true,
                      message:'渠道余额是必须项'
                  }]}
                >
                    <InputNumber placeholder="请输入渠道余额" style={{ width: '100%' }}></InputNumber>
                </FormItem>


                <FormItem
                    label="api类型"
                    name="apiId"
                    rules={
                        [
                            {
                                required:true,
                                message:"api类型是必须项"
                            }
                        ]
                    }
                >
                    <Select onChange={selectOnChange}
                    placeholder="请选择api模板"
                    >
                        {apis?.map((item,index)=>{
                                return  <Option key={item.id} value={item.id}>{item.apiName}</Option>
                            })}
                    </Select>
                </FormItem>
                <FormItem
                    label="状态"
                    name="status"
                >
                    <Select>
                        <Option value={"INVOKE"}>正常</Option>
                        <Option value={"FORBIDDEN"}>禁用</Option>
                    </Select>
                </FormItem>
                <Form.List name="apiInfo">
             {(data) => (
          <>
            {fields.map((field,index) => (
                <Form.Item
                  label={field.label}
                  name={field.name}
                  key={field.key}
                  rules={[
                    {
                      required: true,
                      message: '请输入参数',
                    },
                  ]}
                >
                  <Input  placeholder={field.placeholder}/>
                </Form.Item>
            ))}
          </>
        )}
      </Form.List>
            </Form>
        </Modal>
    )
}

export default updateChannel;